;(function(){
    var LightBox = function(){
        var self = this;

        //需要用到的数据
        imgWidth = $(".img_list img").width();
        imgNumber = $(".img_list img").size();
        allWidth = imgWidth * (imgNumber + 1) ;

        //
        $(".img_list").width(allWidth);
        //默认给第一张图片添加class
        $(".img_list img:first").addClass("activeImg");
        for(var i = 0; i < imgNumber; i++){
            $(".buttons").append("<div id='d"+i+"'></div>");
        }
        $("#d0").addClass("activeDiv");
        $(".buttons div:last").css({"marginRight":"0px"});

        //给按钮绑定事件
        $("#btnLeft").click(self.previousPic);
        $("#btnRight").click(self.nextPic);
        $(".buttons div").click(self.btnTab);
    };
    LightBox.prototype = {
        nextPic:function(){
            //获取到当前显示的图片
            var nI = $(".activeImg").index();
            //获取到当前显示的按钮
            var nD = $(".activeDiv").index();
            //移动一定的长度
            if(nI<imgNumber - 1){
                $(".img_list").stop().animate({marginLeft:-imgWidth*(nI+1)},500,function(){
                    $(".img_list img").removeClass("activeImg");
                    $(".img_list img:eq("+ (nI+1) +")").addClass("activeImg");
                    $(".buttons div").removeClass("activeDiv");
                    $(".buttons div:eq("+ (nD+1) +")").addClass("activeDiv");
                });
            }else {
                //看到最后一张图片再点击向右的时候
                //复制第一张图片到队列最后
                $(".activeImg").after($(".img_list img:first").clone(true));
                //移动到最后一张图片位置
                $(".img_list").stop().animate({marginLeft:-imgWidth*(nI+1)},500,function(){
                    //将此事的margin归零，回到了最开始的位置
                    $(".img_list").css({marginLeft:0});
                    //将刚复制删除
                    $(".img_list img:last").remove();
                    //添加标记
                    $(".img_list img").removeClass("activeImg");
                    $(".img_list img:first").addClass("activeImg");

                    $(".buttons div").removeClass("activeDiv");
                    $(".buttons div:first").addClass("activeDiv");
                    
                });
            }
        },
        previousPic:function(){
            //获取到当前显示的图片
            var nI = $(".activeImg").index();
            //获取到当前显示的按钮
            var nD = $(".activeDiv").index();
            //移动一定的长度
            if(nI==0){
                //将最后一张复制到最前面
                $(".activeImg").stop().before($(".img_list img:last").clone(true));
                //将窗口移动到第二章图片的位置
                $(".img_list").css({marginLeft:-imgWidth});
                //将窗口动画到第一张图片的位置
                $(".img_list").stop().animate({marginLeft:0},500,function(){
                    //删除第一张图片
                    $(".img_list img:first").remove();
                    //将窗口移动到最后以上图片
                    var lastPicMarginLeft = (imgNumber - 1) * imgWidth;
                    $(".img_list").css({marginLeft:-lastPicMarginLeft});
                    //添加标记
                    $(".img_list img").removeClass("activeImg");
                    $(".img_list img:last").addClass("activeImg");

                    $(".buttons div").removeClass("activeDiv");
                    $(".buttons div:last").addClass("activeDiv");
                });
                //移动到最前面
                
            }
            else {
                $(".img_list").stop().animate({marginLeft:-1000*(nI-1)},500,function(){
                    $(".img_list img").removeClass("activeImg");
                    $(".img_list img:eq("+ (nI-1) +")").addClass("activeImg");

                    $(".buttons div").removeClass("activeDiv");
                    $(".buttons div:eq("+ (nD-1) +")").addClass("activeDiv");
                });
            }
        },
        btnTab:function(e){
            var targetElementId = e.target.id;//获取到鼠标点击到的html节点
            var target = $(".buttons div#"+targetElementId);
            var n = target.index();
            //移动一定的长度
            $(".img_list").stop().animate({marginLeft:-imgWidth*n},500,function(){
                $(".img_list img").removeClass("activeImg");
                $(".img_list img:eq("+ (n) +")").addClass("activeImg");

                $(".buttons div").removeClass("activeDiv");
                $(".buttons div:eq("+ (n) +")").addClass("activeDiv");
            });
        }
    };
    window["LightBox"] = LightBox;
})(jQuery);